<template>
	<view class="u-p-l-80 u-p-r-80">
		<!-- 标题 -->
		<view class="font-bold u-f-78">{{ lang_first.first_title }}</view>
		
		<!-- 表单 -->
		<view class="u-m-t-86 form-item">
			<input
			v-model="value"
			maxlength="10"
			class="u-f-36"
			:placeholder="lang_first.first_error"/>
		</view>
		
		<!-- 提示 -->
		<view class="color-grew u-m-t-34">{{ lang_first.first_tips }}</view>
		
		<!-- 提交按钮 -->
		<view
		class="flex-center-center"
		style="margin-top: 162rpx">
			<x-common-btn
			width="590"
			height="102"
			@click="nextAction"
			>{{ lang_common.continue }}</x-common-btn>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			parentObj: {
				default: () => ({})
			}
		},
		data() {
			return {
				value: ''
			}
		},
		watch: {
			parentObj: {
				handler(v) {
					this.value = v && v.nick || ''
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			nextAction() {
				if (!this.value) {
					this.$api.msg(this.lang_first.first_error)
					return;
				}
				this.$emit('change', { nick: this.value })
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-item {
		padding-bottom: 16rpx;
		border-bottom: 4rpx solid rgba(179, 185, 197, .2);
	}
</style>
